<template>
  <view class="container">
    <sc-navbar back title="补货信息"></sc-navbar>
    <view class="title">
      商品信息
    </view>
    <sc-view padding="0 77rpx 0 60rpx">
      <up-form labelPosition="left" :model="formData" :labelStyle="{ fontSize: '26rpx', color: '#3D3D3D' }"
        labelWidth="400rpx">
        <up-form-item label="商品批号" prop="productBatchNumber" required>
          <sc-flex jc="end" ai="center" width="100%" height="60rpx">
            <input v-model="formData.productBatchNumber" class="inp" placeholder="请输入商品批号"
              placeholder-style="font-size: 23rpx;color: #909399;"></input>
          </sc-flex>
        </up-form-item>
        <up-form-item label="生产日期" prop="productionDate" required>
          <sc-flex jc="end" ai="center" width="100%" height="60rpx" @click="showProductionDatePicker = true">
            <sc-text :text="$u.timeFormat(formData.productionDate, 'yyyy-mm-dd') || '点击选择'" size="23rpx"
              :color="formData.productionDate ? '#3D3D3D' : '#909399'"></sc-text>
            <sc-icon name="arrow-right" size="23rpx" color="primary"></sc-icon>
          </sc-flex>
        </up-form-item>
        <up-form-item label="有效期至" prop="validityDate" required>
          <sc-flex jc="end" ai="center" width="100%" height="60rpx" @click="showValidity = true">
            <sc-text :text="$u.timeFormat(formData.validityDate, 'yyyy-mm-dd') || '点击选择'" size="23rpx"
              :color="formData.validityDate ? '#3D3D3D' : '#909399'"></sc-text>
            <sc-icon name="arrow-right" size="23rpx" color="primary"></sc-icon>
          </sc-flex>
        </up-form-item>
        <up-form-item label="追踪码" prop="trackingCode">
          <sc-flex jc="end" ai="center" width="100%" height="60rpx">
            <input v-model="formData.trackingCode" class="inp" placeholder="请输入追踪码"
              placeholder-style="font-size: 23rpx;color: #909399;"></input>
          </sc-flex>
        </up-form-item>
        <up-form-item label="灭菌批号" prop="sterilizationBatchNumber">
          <sc-flex jc="end" ai="center" width="100%" height="60rpx">
            <input v-model="formData.sterilizationBatchNumber" class="inp" placeholder="请输入灭菌批号"
              placeholder-style="font-size: 23rpx;color: #909399;"></input>
          </sc-flex>
        </up-form-item>
        <up-form-item label="灭菌效期" prop="sterilizationExpirationDate">
          <sc-flex jc="end" ai="center" width="100%" height="60rpx" @click="showSterilization = true">
            <sc-text :text="$u.timeFormat(formData.sterilizationExpirationDate, 'yyyy-mm-dd') || '点击选择'" size="23rpx"
              :color="formData.sterilizationExpirationDate ? '#3D3D3D' : '#909399'">
            </sc-text>
            <sc-icon name="arrow-right" size="23rpx" color="primary"></sc-icon>
          </sc-flex>
        </up-form-item>
        <up-form-item label="" prop="certificateConformityAddress" labelWidth="0">
          <sc-flex jc="between" ai="center" width="100%" height="90rpx">
            <sc-flex ai="center">
              <sc-text text="合格证照片" size="27" color="#3D3D3D"></sc-text>
              <sc-text text="（最大10MB，支持jpg，jpeg，png）" size="19rpx" color="#909399"></sc-text>
            </sc-flex>
            <view class="upload-wrap"></view>
          </sc-flex>
        </up-form-item>
      </up-form>
    </sc-view>
    <up-datetime-picker :show="showProductionDatePicker" v-model="formData.productionDate" mode="date" :max-date="today"
      @confirm="showProductionDatePicker = false" @cancel="showProductionDatePicker = false"></up-datetime-picker>
    <up-datetime-picker :show="showValidity" v-model="formData.validityDate" mode="date" @confirm="showValidity = false"
      @cancel="showValidity = false"></up-datetime-picker>
    <up-datetime-picker :show="showSterilization" v-model="formData.sterilizationExpirationDate" mode="date"
      :max-date="today" @confirm="showSterilization = false" @cancel="showSterilization = false"></up-datetime-picker>
    <!-- 底部确认按钮 -->
    <sc-footer height="150" col-gap="45">
      <sc-button type="grey-blue" width="262" height="75" text="取消" @click="uni.navigateBack()"></sc-button>
      <sc-button type="primary" width="262" height="75" text="确认" @click="handlerSubmit"></sc-button>
    </sc-footer>
  </view>
</template>
<script setup>

const today = new Date().toISOString().split('T')[0];
const formData = reactive({
  id: undefined,
  productDataType: undefined,
  productDataAssociationCode: undefined,
  productName: undefined,
  productCode: undefined,
  productStatus: undefined,
  udiCode: undefined,
  productBatchNumber: undefined,
  productionDate: undefined,
  validityDate: undefined,
  trackingCode: undefined,
  sterilizationExpirationDate: Date.now(),
  sterilizationBatchNumber: undefined,
  certificateConformityAddress: undefined,
  coordinatesList: undefined
});

onLoad(({ id }) => {
  formData.id = id;
})
const showProductionDatePicker = ref(false);
const showValidity = ref(false);
const showSterilization = ref(false);
// 提交表单
const handlerSubmit = () => {
  // 简单校验
  if (!formData.productBatchNumber) {
    uni.showToast({ title: '请输入商品批号', icon: 'none' });
    return;
  }
  if (!formData.productionDate) {
    uni.showToast({ title: '请选择生产日期', icon: 'none' });
    return;
  }
  if (!formData.validityDate) {
    uni.showToast({ title: '请选择有效期至', icon: 'none' });
    return;
  }

  const params = uni.$sc.deepClone(formData);
  if (params.productionDate) {
    params.productionDate = uni.$u.timeFormat(params.productionDate, 'yyyy-mm-dd');
  }
  if (params.validityDate) {
    params.validityDate = uni.$u.timeFormat(params.validityDate, 'yyyy-mm-dd');
  }
  if (params.sterilizationExpirationDate) {
    params.sterilizationExpirationDate = uni.$u.timeFormat(params.sterilizationExpirationDate, 'yyyy-mm-dd');
  }
  _api.saveStockInfoByNailboxCode(params).then((res) => {
    uni.showToast({
      title: "新增成功",
      icon: "none",
    });
    uni.redirectTo({
      url: "/subDingHe/pages/replenishOperation"
    });
  });
};
</script>

<style lang="scss" scoped>
.title {
  margin: 0 15rpx;
  font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
  font-weight: 400;
  font-size: 26rpx;
  color: #8e8e8e;
  line-height: 38rpx;
  padding: 30rpx 0 0 20rpx;
  width: 720rpx;
  height: 75rpx;
  background: #FFFFFF;
  border-bottom: 1px solid #EBEBEB;
}

.inp {
  width: 100%;
  text-align: right;
  font-size: 23rpx;
}

.upload-wrap {
  width: 135rpx;
  height: 90rpx;
  background: rgba(22, 119, 255, 0.102);
  border-radius: 8rpx 8rpx 8rpx 8rpx;
}
</style>
